<template>
  <div class="cart">
    <!-- 商品卡片 -->
    <div v-if="cartlist.length > 0" class="cart_box">
      <div class="cart_item" v-for="(item,index) in cartlist" :key="item.id">
        <div class="cart_l"><van-checkbox v-model="item.checked" @click="ChangeChecked(item)"/></div>
        <div class="cart_r">
          <van-card
            :price="item.price"
            :title="item.title"
            :thumb="item.img"
          >
            <template #desc>
              <van-stepper class="item_stepper" v-model="item.issale" @change="onChange" />
            </template>
            <template #num>
              <van-button type="danger" size="mini" @click="delete_item(index)">删除</van-button>
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="暂无数据">
        <van-button round type="danger" class="bottom-button" @click="$router.push('/')">去购物</van-button>
      </van-empty>
    </div>

    <!-- 底部提交栏 -->
    <van-submit-bar :price="getAllPrice" button-text="提交订单" v-show="cartlist.length > 0">
      <van-checkbox v-model="checked" @click="ChangeAllChecked">全选</van-checkbox>
    </van-submit-bar >
  </div>
</template>
<script>
import { Toast } from 'vant'
import { mapGetters, mapState } from 'vuex'
export default {
  data () {
    return {
      checked: true,
      price: 300
    }
  },
  computed: {
    ...mapState({
      cartlist: state => state.cart.cartList
    }),
    // 计算购物车总价格
    ...mapGetters({
      getAllPrice: 'cart/getAllPrice'
    }),
    // 监听全选
    getAllChecked: {
      get() {
        return this.$store.getters['cart/getAllChecked']
      },
      set() {}
    }
  },
  created() {
    this.checked = this.getAllChecked
  },
  updated() {
    this.checked = this.getAllChecked
  },
  methods: {
    // 更新每个打勾状态
    ChangeChecked(item) {
      const Change = {
        name: item.id,
        checked: item.checked
      }
      this.$store.commit('cart/UPDATE_CHECKED', Change)
    },
    // 修改数量
    onChange(value) {
      if (value === '') return
      this.$store.commit('cart/CHANGE_COUNT', value)
    },
    // 点击全选
    ChangeAllChecked() {
      const Change = this.checked
      this.$store.commit('cart/GET_ALLCHECK', Change)
    },
    // 删除商品
    delete_item(index) {
      Toast('删除成功...')
      this.$store.commit('cart/DELETE', index)
    }
  }
}
</script>
<style lang="scss" >
.cart{
  padding: 10px;
  box-sizing: border-box;
  .centerList{
    margin: 6px 0 ;
    border: 1px solid #eee;
    overflow: hidden;
    .van-radio-group{
      margin-top: 0.05rem;
    }
    .van-checkbox{
      width: 20px;
      height: 126px;
      background-color: #fff;
      float: left;
    }
    .van-card:not(:first-child) {
      margin-top: 0px;
    }
  }
  .cart_box{
    margin-bottom: 50px;
  }
  .cart_item{
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    background: #fafafa;
    margin-bottom: 10px;
    .cart_l{
      width: 10%;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .cart_r{
      width: 90%;
      .van-card__title{
        font-size: 16px;
      }
      .van-card__price-integer{
        font-size: 13px;
      }
      .van-card__price{
        color: red;
      }
      .item_stepper{
        margin-top: 10px;
      }
    }
  }
  .bottom-button {
    width: 160px;
    height: 40px;
  }
}

</style>